/*
  学习目标：useEffect 第二个参数小结
  1. [] 代表挂载后, 只会执行一次
  2. [依赖项]
  3. 不写第二个参数
*/
import React from "react";
import { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState("hello");

  // 1. 👍[] 代表挂载后, 只会执行一次
  // useEffect(() => {
  //   document.title = count;
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, []);

  // 2. [依赖项] 代表挂载后,更新后, 二合一
  // 👍只会监听依赖项count变化时, 才自动执行
  useEffect(() => {
    document.title = count;
    console.log("count我被执行了  ----->  ");
  }, [count]);

  // 3. 不写: 代表挂载后,更新后, 二合一,
  // 👎监听所有的状态变化, 都会自动执行, 几乎不用
  useEffect(() => {
    document.title = count;
    console.log("我被执行了  ----->  ");
  });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <h2>{msg}</h2>
      <button onClick={() => setMsg(msg + "~")}>+~</button>
    </div>
  );
}
